<template>
    <el-card class="card-price">
        <section class="todoapp">
            <!-- header -->
            <header class="header">
                <input v-model="todo" class="new-todo" autocomplete="off" placeholder="Todo List"
                    @keyup.enter="addTodo">
            </header>
            <section class="main" v-show="defalutList.length">
                <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox"
                    @change="selectAll({ done: !allChecked })">
                <label for=" toggle-all" />
                <ul class="todo-list">
                    <li :class="{ completed: item.done, editing: editing }" v-for="item in defalutList" :key="item.id">
                        <div class="view">
                            <input :checked="item.done" class="toggle" type="checkbox" @change="modifyState(item.id)">
                            <label v-text="item.text" />
                            <button class=" destroy" @click="deleteTask(item.id)" />
                        </div>
                        <input value="123" class="edit">
                    </li>
                </ul>
            </section>
            <!-- footer -->
            <footer class="footer" v-show="defalutList.length">
                <span class="todo-count">
                    <strong>{{ hangAir.length }}</strong>
                    items left
                </span>
                <ul class="filters">
                    <li v-for="(val, key) in filters" :key="key">
                        <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key |
                                capitalize
                        }}</a>
                    </li>
                </ul>
            </footer>
        </section>
    </el-card>
</template>

<script>

export default {
    name: 'Price',
    data() {
        return {
            todo: '',
            editing: false, // 用来判断是展示还是编辑
            visibility: 'All',
            filters: {
                all: todos => todos,
                active: todos => todos.filter(todo => !todo.done),
                completed: todos => todos.filter(todo => todo.done)
            },
            defalutList: [
                { text: 'star this repository', id: 1, done: false },
                { text: 'fork this repository', id: 2, done: false },
                { text: 'follow author', id: 3, done: false },
                { text: 'vue-element-admin', id: 4, done: true },
                { text: 'vue', id: 5, done: true },
                { text: 'element-ui', id: 6, done: true },
                { text: 'axios', id: 7, done: true },
                { text: 'webpack', id: 8, done: true }
            ]
        }
    },
    filters: {
        pluralize: (n, w) => n === 1 ? w : w + 's',
        capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
    },
    computed: {
        // 未完成
        hangAir() {
            return this.defalutList.filter(item => !item.done)
        },
        allChecked() {
            return this.defalutList.every(item => item.done)
        },
    },
    methods: {
        // 添加任务
        addTodo() {
            if (this.todo.trim()) {
                this.defalutList.unshift({
                    text: this.todo,
                    id: Date.parse(new Date()),
                    done: false
                })
            }
            this.todo = ''
        },
        // 全选
        selectAll(done) {
            console.log('咱看看执行了么')

            console.log('aaaaaaaaaaaa', done);
            this.defalutList.forEach(item => item.done = done)
        },

        modifyState(id) {
            this.defalutList = this.defalutList.map(item => {
                if (item.id === id) {
                    item.done = !item.done
                }
                return item
            })
        },
        // 删除
        deleteTask(id) {
            this.defalutList = this.defalutList.filter(item => item.id !== id)
        }
    }
}
</script>

<style lang="scss" scoped>
/* 
   <section class="todoapp">
            <!-- header -->
            <header class="header">
                <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
            </header>
            <section class="main">
                <input id="toggle-all" checked="true" class="toggle-all" type="checkbox">
                <label for=" toggle-all" />
                <ul class="todo-list">
                    <li class=" completed">
                        <div class="view">
                            <input checked="true" class="toggle" type="checkbox">
                            <label />
                            <button class=" destroy" @click="deleteTodo(todo)" />
                        </div>
                        <input value="123" class="edit">
                    </li>
                </ul>
            </section>
            <!-- footer -->
            <footer class="footer">
                <span class="todo-count">
                    <strong>{{ 111 }}</strong>
                    {{ 22 }} left
                </span>
                <ul class="filters">
                    <li>
                        <a class="selected">{{
                                1111
                        }}</a>
                    </li>
                </ul>
            </footer>
        </section>
 */
.card-price {
    // height: 100%;

    .todoapp {
        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.4em;
        color: #4d4d4d;
        min-width: 230px;
        max-width: 550px;
        margin: 0 auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 300;
        background: #fff;
        z-index: 1;
        position: relative;

        button {
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
            font-size: 100%;
            vertical-align: baseline;
            font-family: inherit;
            font-weight: inherit;
            color: inherit;
            -webkit-appearance: none;
            appearance: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        :focus {
            outline: 0;
        }

        .hidden {
            display: none;
        }

        .todoapp {
            background: #fff;
            margin: 130px 0 40px 0;
            position: relative;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
        }

        .todoapp input::-webkit-input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp input::-moz-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp input::input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp h1 {
            position: absolute;
            top: -155px;
            width: 100%;
            font-size: 100px;
            font-weight: 100;
            text-align: center;
            color: rgba(175, 47, 47, 0.15);
            -webkit-text-rendering: optimizeLegibility;
            -moz-text-rendering: optimizeLegibility;
            text-rendering: optimizeLegibility;
        }

        .new-todo,
        .edit {
            position: relative;
            margin: 0;
            width: 100%;
            font-size: 18px;
            font-family: inherit;
            font-weight: inherit;
            line-height: 1.4em;
            border: 0;
            color: inherit;
            padding: 6px;
            border: 1px solid #999;
            box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .new-todo {
            padding: 10px 16px 16px 60px;
            border: none;
            background: rgba(0, 0, 0, 0.003);
            box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
        }

        .main {
            position: relative;
            z-index: 5;
            border-top: 1px solid #e6e6e6;
        }

        .toggle-all {
            text-align: center;
            border: none;
            opacity: 0;
            position: absolute;
        }

        .toggle-all+label {
            width: 60px;
            height: 34px;
            font-size: 0;
            position: absolute;
            top: -52px;
            left: -13px;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .toggle-all+label:before {
            content: '❯';
            font-size: 22px;
            color: #e6e6e6;
            padding: 10px 27px 10px 27px;
        }

        .toggle-all:checked+label:before {
            color: #737373;
        }

        .todo-list {
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style: none;
        }

        .todo-list li {
            position: relative;
            font-size: 24px;
            border-bottom: 1px solid #ededed;
        }

        .todo-list li:last-child {
            border-bottom: none;
        }

        .todo-list li.editing {
            border-bottom: none;
            padding: 0;
        }

        .todo-list li.editing .edit {
            display: block;
            width: 506px;
            padding: 12px 16px;
            margin: 0 0 0 43px;
        }

        .todo-list li.editing .view {
            display: none;
        }

        .todo-list li .toggle {
            text-align: center;
            width: 40px;
            height: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            border: none;
            /* Mobile Safari */
            -webkit-appearance: none;
            appearance: none;
        }

        .todo-list li .toggle {
            opacity: 0;
        }

        .todo-list li .toggle+label {

            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-position: center left;
            background-size: 36px;
        }

        .todo-list li .toggle:checked+label {
            background-size: 36px;
            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
        }

        .todo-list li label {
            word-break: break-all;
            padding: 15px 15px 15px 50px;
            display: block;
            line-height: 1.0;
            font-size: 14px;
            transition: color 0.4s;
        }

        .todo-list li.completed label {
            color: #d9d9d9;
            text-decoration: line-through;
        }

        .todo-list li .destroy {
            display: none;
            position: absolute;
            top: 0;
            right: 10px;
            bottom: 0;
            width: 40px;
            height: 40px;
            margin: auto 0;
            font-size: 30px;
            color: #cc9a9a;
            transition: color 0.2s ease-out;
            cursor: pointer;
        }

        .todo-list li .destroy:hover {
            color: #af5b5e;
        }

        .todo-list li .destroy:after {
            content: '×';
        }

        .todo-list li:hover .destroy {
            display: block;
        }

        .todo-list li .edit {
            display: none;
        }

        .todo-list li.editing:last-child {
            margin-bottom: -1px;
        }

        .footer {
            color: #777;
            position: relative;
            bottom: 0;
            padding: 10px 15px;
            height: 40px;
            width: 422px;
            text-align: center;
            border-top: 1px solid #e6e6e6;
            margin-top: 0
        }

        .footer:before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 40px;
            overflow: hidden;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
        }

        .todo-count {
            float: left;
            text-align: left;
        }

        .todo-count strong {
            font-weight: 300;
        }

        .filters {
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 1;
            list-style: none;
        }

        .filters li {
            display: inline;
        }

        .filters li a {
            color: inherit;
            font-size: 12px;
            padding: 3px 7px;
            text-decoration: none;
            border: 1px solid transparent;
            border-radius: 3px;
        }

        .filters li a:hover {
            border-color: rgba(175, 47, 47, 0.1);
        }

        .filters li a.selected {
            border-color: rgba(175, 47, 47, 0.2);
        }

        .clear-completed,
        html .clear-completed:active {
            float: right;
            position: relative;
            line-height: 20px;
            text-decoration: none;
            cursor: pointer;
        }

        .clear-completed:hover {
            text-decoration: underline;
        }

        .info {
            margin: 65px auto 0;
            color: #bfbfbf;
            font-size: 10px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .info p {
            line-height: 1;
        }

        .info a {
            color: inherit;
            text-decoration: none;
            font-weight: 400;
        }

        .info a:hover {
            text-decoration: underline;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {

            .toggle-all,
            .todo-list li .toggle {
                background: none;
            }

            .todo-list li .toggle {
                height: 40px;
            }
        }

        @media (max-width: 430px) {
            .footer {
                height: 50px;
            }

            .filters {
                bottom: 10px;
            }
        }
    }

}
</style>